<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="100px"  ref="formInline" slot="form" :rules="rules">
                <el-row :gutter="21"> 
                    <el-col :span="8">
                        <el-form-item label="姓名">
                            <el-input v-model="formInline.commentName" placeholder="请输入内容" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-select v-model="formInline.status" style="width:100%" >
                                <el-option v-for="item in showStatus" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="评论日期">
                            <el-date-picker v-model="formInline.updateTime" :editable="false" type="daterange" placeholder="选择日期" :picker-options="formInline.pickerOptions1" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                </div>
            </el-form>
 
            <div class="table-title" slot="table-title">
                <div>
                    <el-button  @click="showComment">显示</el-button>
                    <el-button  @click="hideComment">隐藏</el-button>
                </div>
                <div>
                    <el-button  @click="goBack">返回</el-button>
                </div>
            </div>
            
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="姓名" align="center"  prop="commentName" width="170">
                    <template scope="scope">
                        <span>{{scope.row.commentName | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="e学云ID号" align="center" prop="exueCode" width="170">
                    <template scope="scope">
                        <span>{{scope.row.exueCode | isNull}}</span>
                    </template>
                </el-table-column>
 
                <el-table-column label="评论" align="center" prop="commentContent">
                    <template scope="scope">
                        <span>{{scope.row.commentContent | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="评论时间" align="center" prop="uploadTime" width="170">
                    <template scope="scope">
                        <span>{{scope.row.uploadTime | isNull}}</span>
                    </template>
                </el-table-column>
                
 
                <el-table-column align="left" label="操作" width="120">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" v-if="scope.row.hide=='0'" @click="showCom(scope.row.commentId,scope.row.hide)">隐藏</el-button>
                        <el-button type="text" class="btn-success" v-if="scope.row.hide=='1'" @click="showCom(scope.row.commentId,scope.row.hide)">显示</el-button>
                        <el-button type="text" class="btn-success" @click="reply(scope.row)">回复</el-button>
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="+listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <el-dialog title="回复" :visible.sync="dialogFormVisible" size="tiny" :before-close="handleClose">
            <el-form label-width="65px" class="demo-ruleForm formstyle" :rules="rules" :model="ruleForm" ref="ruleForm">
                <el-row>
                    <div class="fontStyle"> * 回复内容</div>
                    <el-col :span="21">
                        <el-form-item label="" prop="reasonContent">
                            <el-input style="width:100%;" type="textarea" :autosize="{ minRows: 6, maxRows: 12}" v-model="ruleForm.reasonContent" :placeholder="placeholder" :maxlength="300" resize="none"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('ruleForm')">关 闭</el-button>
                <el-button type="primary"  @click="submitForm('ruleForm')" :loading="loadingBtn">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
 
<script>
import { pageDynamicComment, hideDynamicComment, replyDynamicComment } from 'api/dynamics';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import moment from 'moment';
 
export default{
    components: {TableLayout},
    data() {
        return {
            dialogFormVisible: false,
            ruleForm: {
                reasonContent: ''
            },
            form: {},
            loadingBtn: false,
            formInline: {// form表单数据
                updateTime: '',
                commentName: '',
                status: '',
                pickerOptions1: {
                    
                }
            },
            placeholder: '',
            showStatus: [
                {
                    id: '',
                    name: '请选择'
                },
                {
                    id: '1',
                    name: '隐藏'
                },
                {
                    id: '0',
                    name: '显示'
                }
            ],
            checked: true,
            dataApply: [{}],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                reasonContent: [
                    { required: true, message: '请输入回复内容', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ]
            },
            loading: false,
            multipleSelection: []
        }
    },
   
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'uid'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    // 初始化
    created() {
        this.searchFetchData();
        // this.getSchoolType();
    },
    filters: {
        filterCreateTime(val) {
            if (val) {
                return val.substr(0, val.length-2) 
            } else {
                return '--'
            }
        }
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        goBack() {
            this.$router.push({path: '/dynamics/dynamics'});
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let startTime = this.formInline.updateTime[0]==undefined ? '' :moment(this.formInline.updateTime[0]).format('YYYY-MM-DD');
            let endTime = this.formInline.updateTime[1]==undefined ? '' :moment(this.formInline.updateTime[1]).format('YYYY-MM-DD');
            pageDynamicComment(this.listQuery.page, this.config.pageSize, this.$route.params.pid, this.formInline.commentName, this.formInline.status, startTime, endTime).then(response => {              
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },
        onSubmit() {
            this.searchFetchData();
        },
        // 表单查询
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.loadingBtn = true;
                    replyDynamicComment(this.ruleForm.reasonContent, this.$route.params.pid, this.form.commentUserId, this.form.commentName, this.form.userType).then(res => {
                        this.$message.success('发布成功');
                        this.handleClose();
                        this.searchFetchData();
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm() {
            this.dialogFormVisible = false;
            this.ruleForm.reasonContent = '';
            this.$refs.ruleForm.resetFields();
            this.loadingBtn = false;
        },
        handleClose() {
            this.dialogFormVisible = false;
            this.ruleForm.reasonContent = '';
            this.$refs.ruleForm.resetFields();
            this.loadingBtn = false;
        },
        reply(row) {
            this.dialogFormVisible = true;
            this.form = row;
            this.placeholder = '@'+row.commentName;
        },
        // 显示隐藏
        showCom(id, oder) {
            let tips = oder == '0' ? '确定隐藏该评论?' : '确定显示该评论?';
            let message = oder == '0' ? '隐藏评论成功' : '显示评论成功';
            let status = oder == '0' ? '1' : '0'
            this.$confirm(tips, ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                hideDynamicComment(id, status).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message
                    })
                })
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 批量显示
        showComment() {
            if (this.multipleSelection.length<=0) {
                this.$message('请选择需要显示的评论');
                return ;
            }
            let roleIds = '';
            for (let i=0;i<this.multipleSelection.length;i++) {
                roleIds+=this.multipleSelection[i].commentId+','; 
            }
            roleIds=roleIds.substring(0, roleIds.length-1)
            this.$confirm('此操作将批量显示选中的评论, 是否继续?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                hideDynamicComment(roleIds, '0').then(response => {
                    this.searchFetchData();
                    this.$message.success('批量显示成功');
                })
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 批量隐藏
        hideComment() {
            if (this.multipleSelection.length<=0) {
                this.$message('请选择需要隐藏的评论');
                return ;
            }
            let roleIds = '';
            for (let i=0;i<this.multipleSelection.length;i++) {
                roleIds+=this.multipleSelection[i].commentId+','; 
            }
            roleIds=roleIds.substring(0, roleIds.length-1)
            this.$confirm('此操作将批量隐藏选中的评论, 是否继续?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                hideDynamicComment(roleIds, '1').then(response => {
                    this.searchFetchData();
                    this.$message.success('批量隐藏成功');
                })
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 查看
        check(row) {
            this.$router.push({path: `checkDynamics/${row}`});
        }
 
    }
}
</script>
<style lang="scss" scoped>
 
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .el-tag{
            margin-left:5px;
            background:#f9f9f9;
            color:#444;
        }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .dialogForm{
        padding:15px 0 0 0 !important;
    }
    .dialog-footer{
        text-align: center;
    }
    .radio-box{
        margin-bottom:30px;
    }
    .checkReson{
        padding:50px 100px;
    }
    .fontStyle{
        padding-left:65px;
        font-size:14px;
        color:red;
        margin-bottom:10px;
    }
}
</style>